<template>
  <div>
    <el-table
      v-loading="loading"
      :data="props.tableData"
      :border="props.tableProperty.border"
      :height="props.tableProperty.height"
      :stripe="props.tableProperty.stripe"
      :highlight-current-row="props.tableProperty.highlightCurrentRow"
      :row-class-name="props.tableProperty.rowClassName"
      :default-sort="props.tableProperty.defaultSort"
      @current-change="
        event =>
          props.tableProperty.highlightCurrentRow &&
          props.tableEvent.handleCurrentChange
            ? props.tableEvent.handleCurrentChange(event)
            : null
      "
      @selection-change="
        event =>
          props.tableEvent.handleSelectionChang
            ? props.tableEvent.handleSelectionChange(event)
            : null
      "
      style="width: 100%"
    >
      <el-table-column
        v-if="props.tableEvent.handleSelectionChange !== null"
        type="selection"
        width="55"
      />
      <el-table-column
        v-if="props.tableProperty.indexMethod"
        align="center"
        type="index"
        label="序号"
        width="55"
        :index="props.tableProperty.indexMethod"
      />
      <template v-for="(column, index) in props.columns" :key="index">
        <el-table-column
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :align="column.align ? column.align : 'center'"
          :show-overflow-tooltip="column.showOverflowTooltip"
          :sortable="column.sortBy != null || column.sortable"
      /></template>
    </el-table>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  },
  /**
   * 属性
   */
  tableProperty: {
    type: Object,
    default: () => {
      return {
        border: true,
        align: "center",
        height: "100%",
        stripe: false,
        rowClassName: "",
        highlightCurrentRow: false,
        indexMethod: 0,
        defaultSort: {}
      };
    }
  },
  /**
   * 事件
   */
  tableEvent: {
    type: Object,
    default: () => {
      return {
        handleCurrentChange: null,
        handleSelectionChange: null
      };
    }
  }
});
const loading = false;
console.log("---", props.tableProperty);
</script>
